<template>
    <div class="task_info_wrap" v-loading="over">
        <div class="company_info" v-if="task_info">
            <p>{{task_info.company && task_info.company.company_name}}</p>
            <div>
                <img v-if="task_info.company" :src="task_info.company.logo_path" alt="">
            </div>
        </div>
        <div class="task_salary">
            <div class="salary">
                <span v-if="task_info && task_info.payment_method !== 1">{{task_info.payment_money}}</span>
                <span v-if="task_info && task_info.goods">{{handleCommission(task_info.goods)}}</span>
                <span>RMB</span>
                <span v-if="task_info && task_info.payment_method == 1">/单</span>
            </div>
            <div class="task_title">{{task_info && task_info.task_title}}</div>
            <div class="task_lable" v-if="task_info && task_info.payment_method == 1">即结 / 签合同 </div>
            <div class="task_lable" v-if="task_info && task_info.payment_method !== 1">日结 / 签合同 </div>
            <div class="apply">
                <span>发布时间：{{task_info && task_info.created_at}}</span>
                <span>申请：{{task_info && task_info.effective_count}}人</span>
            </div>
        </div>
        <div class="task_detail">
            <div class="task_detail_title">
                任务描述
            </div>
            <div class="play_num">
                <p>招募人数：</p>
                <span>{{task_info && task_info.quantity_max}}人</span>
            </div>
            <div class="city">
                <p>工作城市：</p>
                <span v-text="(task_info) && task_info.city ? task_info.city.city_name : '不限城市'"></span>
            </div>
            <div class="ind">
                <p>适合行业：</p>
                <span v-if="task_info && task_info.payment_method == 1">销售</span>
                <span v-if="task_info && task_info.payment_method !== 1" v-for="(ind,index) in task_info.industry" :key="index">
                    <span>{{ind.name}}</span>
                    <span :style="index == (task_info.industry.length - 1) ? 'display:none' : ''">/</span>
                </span>
            </div>
        </div>

        <div class="img_introduction" v-if="task_info && task_info.images && task_info.images.length > 0">
            <div class="img_introduction_title">
                图片介绍
            </div>
            <carousel :per-page="1" adjustableHeightEasing="300px"
                      :autoplay="true"
                      :centerMode="true" :loop="true"
                      :mouse-drag="false" :autoplayTimeout="5000">
                <slide v-for="(item,index) in task_info.images" :key="index">
                    <el-image
                            :src="item.file_path"
                            fit="contain"></el-image>
                </slide>
            </carousel>
        </div>

        <div class="video_introduction" v-if="task_info && task_info.video">
            <div class="video_introduction_title">
                视频介绍
            </div>
            <div id='player' class="video">
                <video-player  class="video-player vjs-custom-skin"
                               ref="videoPlayer"
                               :playsinline="true"
                               :options="playerOptions"
                               :x5-video-player-fullscreen="true"
                               @pause="onPlayerPause($event)"
                               @play="onPlayerPlay($event)"
                ></video-player>
            </div>
        </div>

        <div class="ask_desc" v-if="task_info && task_info.description">
            <div class="ask_desc_title">
                工作描述
            </div>
            <p>{{task_info && task_info.description}}</p>
        </div>

        <div class="shop_info" v-if="task_info && task_info.payment_method == 1">
            <div class="shop_info_title">
                公司店铺
            </div>
            <div class="store_name">
                <div class="logo" @click="handleStore">
                    <img v-if="shop_info.shop_logo" :src="shop_info.shop_logo"/>
                </div>
                <div class="store_name_contain">
                    <p>{{shop_info.shop_name}}</p>
                    <p>在售商品{{goods_list.length }}</p>
                </div>
            </div>
        </div>

        <div class="good_list" v-if="task_info && task_info.payment_method == 1">
            <ul>
                <li v-for="(item,index) in goods_list" :key="item.goods_id" @click="handleGoods(item.goods_id)">
                    <img :src="$config.baseUrl + item.images[0].file_path" alt="">
                    <div class="good_info">
                        <p>{{item.title}}</p>
                        <p>¥ {{item.price}}</p>
                    </div>
                    <div class="commission">
                        {{item.salary}}
                    </div>
                </li>
            </ul>
        </div>

        <!--v-if="task_info && task_info.address"-->
        <div class="address" v-if="task_info && task_info.address && task_info.payment_method != 1">
            <div class="address_title">
                工作地址
            </div>
            <div class="address_info">
                <div style="align-self: center">
                    <img style="width: 26px;margin-right: 10px" src="../../assets/img/address.png" alt="">
                </div>
                <p>{{task_info && task_info.address}}</p>
            </div>
        </div>

        <div class="space"></div>
        <div class="footer">
            <div class="coc">
                <div class="chat" @click="chat">
                    咨询雇主
                </div>
                <div class="ask" @click="openSimple = true">
                    立即申请
                </div>
            </div>

        </div>

        <div class="store_info">
            <el-dialog
                    title="服务和隐私条款"
                    :visible.sync="info"
                    width="90%"
                    top="30vh"
            >
                <div>
                    <div class="store_name">
                        <div class="logo">
                            <img v-if="shop_info.shop_logo" :src="shop_info.shop_logo"/>
                        </div>
                        <div class="store_name_contain">
                            <p>{{shop_info.shop_name}}</p>
                            <p>在售商品{{goods_list.length}}</p>
                        </div>
                    </div>
                    <div class="synopsis">
                        <div class="title">
                            <span>
                                <i class="el-icon-minus"></i>
                            </span>
                            <p>店铺简介</p>
                            <span>
                                <i class="el-icon-minus"></i>
                            </span>
                        </div>
                        <p>
                            {{goods_list.shop_poster}}
                        </p>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <i class="el-icon-circle-close" @click="info = false"></i>
                </span>
            </el-dialog>
        </div>

        <div class="note">
            <el-dialog
                    title="服务和隐私条款"
                    :visible.sync="openSimple"
                    width="90%"
                    top="30vh"
            >
                <div>
                    <p> 《个人所得税法》规定</p>
                    <p>
                        依法纳税是公民应尽的义务。个人兼职取得的
                        收入应按照“劳务报酬所得”项目缴纳个人所得税。
                        得米平台将以7%的核定征收率为您代收代缴个
                        人所得税和相关服务费。
                    </p>
                </div>
                <span slot="footer" class="dialog-footer">
                    <div class="cancel" @click="openSimple=false">取消</div>
                    <div class="sure" @click="open">确定</div>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import {Carousel, Slide} from 'vue-carousel';
    import http from '../../libs/http'
    import wx from 'weixin-js-sdk'
    import axios from 'axios'
    export default {
        name: 'index',
        components:{
            Carousel,
            Slide,
        },

        data(){
            return{
                id:null,
                task_info:{},
                over:true,
                playerOptions : {
                    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                    autoplay: false, //如果true,浏览器准备好时开始回放。
                    muted: false, // 默认情况下将会消除任何音频。
                    loop: false, // 导致视频一结束就重新开始。
                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    language: 'zh-CN',
                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources: [{
                        //type: "",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                        src: "" //url地址
                    }],
                    poster: "", //你的封面地址
                    // width: document.documentElement.clientWidth, //播放器宽度
                    notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    controlBar: {
                        timeDivider: true,
                        durationDisplay: true,
                        remainingTimeDisplay: false,
                        fullscreenToggle: true  //全屏按钮
                    }
                },
                shop_info:{},
                goods_list:[],
                info:false,
                openSimple:false,
                share_data:{}
            }
        },
        created(){
            this.getRouterData()
        },
        computed:{
            player() {
                return this.$refs.videoPlayer.player
            }
        },
        methods:{
            getRouterData(){
                if(this.$route.query.id){
                    this.id = this.$route.query.id;
                    this.apiGet('api/task/info/' + this.id).then((res)=>{
                        this.task_info = res;
                        if(res){
                            this.over = false;
                            axios.post( this.$config.baseUrl + '/api/wechat/share/params',{share_url:window.location.href})
                                .then(function (response) {
                                    if(response.status !== 200){
                                        this.$message.error(response.statusText);
                                    }else{
                                        if (response.data) {
                                            this.share_data = response.data;
                                            this.share()
                                        }
                                    }
                                    console.log(this.share_data)
                                }.bind(this))
                                .catch(function (error) {
                                    console.log(error);
                                });

                            document.title = res.task_title
                        }
                        if(res.video){
                            this.playerOptions.sources[0].src = res.video.file_path
                        }

                        this.apiGet('api/shop/info/' + res.shop_id).then((res)=>{
                            console.log(res);
                            if(res){
                                this.shop_info = res
                            }
                        })
                        this.apiGet('api/goods/paginate?shop_id=' + res.shop_id).then((res)=>{
                            console.log(res);
                            if(res){
                                this.goods_list = res.data
                            }
                        })

                    })
                }
            },
            handleCommission(array){
                if (array) {
                    let length = array.length;
                    let commission = []
                    if (length > 0) {
                        let price = 0;
                        if (length > 1) {
                            for (let i = 0; i < length; i++) {
                                commission.push(parseInt(array[i].salary))
                            }
                            commission.sort(function(a,b){
                                return a - b
                            });
                            price = commission[0] + '-' + commission[length - 1]
                        } else {
                            commission.push(parseInt(array[0].salary));
                            price = commission[0]
                        }
                        return price
                    }
                }
            },
            onPlayerPlay(player) {
                this.player.play()
            },
            onPlayerPause(player) {
                // alert("pause");
                this.player.pause()
            },
            handleStore(){
                this.info = true;
            },
            open() {
                window.location.href = 'http://app.jmzhipin.com/ability?' + this.task_info.task_id + '&' + this.task_info.task_title
            },
            chat(){
                window.location.href = 'http://app.jmzhipin.com/im?' + this.task_info.user.user_id + '&' + this.task_info.task_id + '&' + this.task_info.company.company_name
            },
            handleGoods(id){
                this.$router.push({
                    name: 'good_info',
                    query:{
                        id:id,
                        task_id:this.task_info.task_id
                    }
                });
            },
            share(){

                let url = window.location.href;
                let description = this.task_info.description;
                let img = this.task_info.company.logo_path;
                let title = this.task_info.task_title;
                console.log(this.share_data)
                wx.config({
                    debug: true,
                    appId: this.share_data.appId ,
                    timestamp: this.share_data.timestamp ,
                    nonceStr: this.share_data.nonceStr ,
                    signature: this.share_data.signature ,
                    jsApiList: [
                        'updateAppMessageShareData',
                        'updateTimelineShareData'
                    ]
                });
                wx.ready(function () {
                    var shareData = {
                        title: title,
                        desc: description,
                        link: url,
                        imgUrl: img
                    };
                    wx.updateAppMessageShareData(shareData);
                    wx.updateTimelineShareData(shareData);
                });
                wx.error(function (res) {
                    console.log(res.errMsg+"错误信息");
                });
                window.alert=function(){
                    return false
                }
            }

        },
        mixins:[http]
    }
</script>

<style lang="stylus">
    add(a)
        a/2
    .task_info_wrap
        width 100%
        position relative
        .company_info
            display flex;
            box-sizing border-box
            padding 17px 20px 53px 20px
            justify-content space-between;
            background:linear-gradient(-45deg,rgba(76,207,255,1),rgba(76,173,255,1));
            p
                font-size:16px!important;
                align-self center;
                text-align left
                color:rgba(255,255,255,1);
            img
                width:58px;
                height:58px;
                border 2px solid #fff
                border-radius:50%;
        .task_salary
            width:335px;
            padding 19px
            margin 0 auto
            text-align left
            border-radius:10px;
            box-sizing border-box
            transform translateY(-30px)
            background:rgba(255,255,255,1);
            box-shadow:0 0 7px 0 rgba(0, 0, 0, 0.17);
            .salary
                span
                    color #333333
                    font-size 14px!important
                span:nth-child(1)
                    color #3BC7FF
                    font-size 40px!important;
            .task_title
                font-weight:bold;
                color #4D4D4D
                font-size 20px!important
                margin-top 19px
                line-height 26px
            .task_lable
                color #999
                font-size 12px!important
                margin-top 19px
            .apply
                color #999
                font-size 9px!important
                margin-top 10px
                span:nth-child(1)
                    margin-right 20px
        .task_detail
            padding 20px
            text-align left
            border-bottom 1px solid #E4E4E4
            .task_detail_title
                color #1A1A1A
                font-size 16px!important
                font-weight bold
                margin-bottom 20px
            .play_num,.city,.ind
                font-size 14px!important
                margin-bottom 18px
                p
                    display inline
                    color #999999
                    margin-right 30px
                span
                    color #333333
            .ind
                margin-bottom 0

        .img_introduction
            padding-bottom 19px
            border-bottom 1px solid #E4E4E4
            .img_introduction_title
                color #1A1A1A
                text-align left
                font-weight bold
                margin-bottom 20px
                padding 19px 0 0 19px
                font-size 16px!important
            .VueCarousel
                height 250px

                .VueCarousel-wrapper
                    height 100%

                    .VueCarousel-inner
                        height 100%

                        .VueCarousel-slide
                            height 100%
                            text-align center

                            img
                                height 250px

                .VueCarousel-pagination
                    .VueCarousel-dot-container
                        margin-top 0 !important


        .video_introduction
            padding-bottom 19px
            border-bottom 1px solid #E4E4E4
            .video_introduction_title
                color #1A1A1A
                text-align left
                font-weight bold
                margin-bottom 20px
                padding 19px 0 0 19px
                font-size 16px!important
            .video
                position: relative
                width 100%;
                height auto
                .vjs-big-play-button
                    font-size 30px
                    width 50px
                    height 50px!important
                    line-height 50px!important
                    border-radius 50%
                    transform translate3d(30%,10%,0)
        .ask_desc
            padding 20px
            border-bottom 1px solid #E4E4E4
            .ask_desc_title
                color #1A1A1A
                text-align left
                font-weight bold
                margin-bottom 20px
                font-size 16px!important
            p
                color:#333333
                text-align left
                line-height:28px
                white-space:pre-line;
                font-size 16px!important
        .address
            padding-bottom 19px
            border-bottom 1px solid #E4E4E4
            .address_title
                color #1A1A1A
                text-align left
                font-weight bold
                margin-bottom 20px
                padding 19px 0 0 19px
                font-size 16px!important
            .address_info
                display flex
                padding-left 19px
                p
                    color:#333333
                    text-align left
                    font-size 16px!important
        .space
            height 73px;
        .footer
            position fixed
            bottom:0;
            left:0;
            right 0;
            padding 12px 20px
            border-top 1px solid #B2B2B2
            background-color #fff
            .coc
                display flex
                .chat
                    align-self center
                    width 120px
                    height:41px;
                    color #24BFFF
                    font-size 14px
                    line-height 41px
                    margin-right 20px
                    border-radius:20px;
                    border:1px solid rgba(36, 191, 255, 1);
                .ask
                    align-self center
                    width:195px;
                    height:41px;
                    color #fff
                    font-size 14px
                    line-height 41px
                    border-radius:20px;
                    background:rgba(36,191,255,1);

        .shop_info
            text-align left
            .shop_info_title
                color #1A1A1A
                text-align left
                font-weight bold
                margin-bottom 20px
                padding 19px 0 0 19px
                font-size 16px!important
            .store_name
                display: flex;
                background: #fff;
                padding: add(2px) 0 add(35px) add(44px);
                .logo
                    align-self: center;
                    img
                        width:add(128px);
                        height:add(128px);
                        border-radius:50%;
                        margin-right: add(45px);
                .store_name_contain
                    p:nth-child(1)
                        font-weight:bold;
                        font-size:add(36px);
                        color:rgba(0,0,0,1);
                        margin-top: add(37px);
                        line-height: add(36px);
                        margin-bottom: add(19px);
                    p:nth-child(2)
                        font-size:add(24px);
                        color:rgba(204,204,204,1);

        .store_info
            .el-dialog__wrapper
                .el-dialog

                    border-radius:10px;
                    .el-dialog__header
                        display none
                    .el-dialog__body
                        padding 22px 28px 22px 37px
                        .store_name
                            padding 0 0 9px 0
                            display: flex;
                            background: #fff;
                            .logo
                                align-self: center;
                                img
                                    width:add(128px);
                                    height:add(128px);
                                    border-radius:50%;
                                    margin-right: add(45px);
                            .store_name_contain
                                p:nth-child(1)
                                    font-weight:bold;
                                    font-size:add(36px);
                                    color:rgba(0,0,0,1);
                                    margin-top: add(37px);
                                    line-height: add(36px);
                                    margin-bottom: add(19px);
                                p:nth-child(2)
                                    font-size:add(24px);
                                    color:rgba(204,204,204,1);
                        .synopsis
                            .title
                                display flex
                                padding-bottom 9px
                                justify-content center
                                color:rgba(153,153,153,1);
                                span
                                    align-self center
                                    i
                                        font-size:30px;
                                p
                                    font-size:15px;
                                    align-self center
                                    padding  0 9px
                            p
                                font-size:14px;
                                color:rgba(153,153,153,1);
                                line-height:18px;

                    .el-dialog__footer
                        padding 0
                        position absolute;
                        left 50%;
                        bottom -44px;
                        transform translateX(-50%)
                        i
                            color white
                            font-size 28px


        .note
            .el-dialog__wrapper
                .el-dialog
                    border-radius:10px;
                    .el-dialog__header
                        display none
                    .el-dialog__body
                        padding 22px 28px 0 37px
                        p:nth-child(1)
                            color: #333333;
                            font-size: 18px;
                            margin-bottom 10px
                        p:nth-child(2)
                            text-align left
                            color: #333333;
                            font-size: 14px;
                            line-height 20px
                    .el-dialog__footer
                        .dialog-footer
                            display flex
                            justify-content space-between
                            .cancel
                                align-self center
                                width 125px
                                height:28px;
                                color #24BFFF
                                font-size 14px
                                text-align center
                                line-height 28px
                                margin-right 20px
                                border-radius:20px;
                                border:1px solid rgba(36, 191, 255, 1);
                            .sure
                                text-align center
                                align-self center
                                width:125px;
                                height:28px;
                                color #fff
                                font-size 14px
                                line-height 28px
                                border-radius:20px;
                                background:rgba(36,191,255,1);
                                border:1px solid rgba(36,191,255,1);

        .good_list
            text-align left
            padding 4px 0 20px 20px
            background:rgba(247,247,247,1);
            border-radius:add(10px) add(10px) 0 0;
            ul
                li
                    position relative
                    display inline-block
                    margin 20px 20px 0 0

                    img
                        width add(315px);
                        height 151px
                        border-radius:add(10px) add(10px) 0 0;
                    .good_info
                        width add(315px);
                        text-align left
                        box-sizing border-box
                        background-color white
                        padding add(15px) add(30px) add(19px) add(10px)
                        p:nth-child(1)
                            color #000000
                            font-size 12px
                            line-height:14px
                            margin-bottom 6px
                        p:nth-child(2)
                            color:#FF5B05
                            font-size 15px
                    .commission
                        position absolute
                        top:0
                        left 0
                        padding 4px 3px
                        border-radius:5px 0px 5px 0px;
                        background:linear-gradient(20deg,rgba(51,167,255,1) 0%,rgba(0,204,255,1) 100%);
</style>